<template>
	<view>
		<unicloud-db v-slot:default="{data, loading, error, options}" collection="my-music-categories-backup" gettree>
			<view v-if="error">{{error.message}}</view>
			<view v-else>
				<!-- 基础用法 -->
				<!-- <view class="" v-for="(item,index) in data" :key="index">
					{{item.name}}
					<view class="text-sm text-primary" v-for="(child,cindex) in item.children">
						{{child.name}}
					</view>
				</view> -->

				<view class="" v-for="(item,index) in data" :key="index">
					<view>
						<view @click="checkboxChange(item._id)">
							{{item.name}}<i class="text-xl" :class="[checkArray.includes(item._id)?'ri-checkbox-line':'ri-checkbox-blank-line' ]"></i>
						</view>
					</view>

					<view class="ml-10 text-md text-base" v-for="(child,cindex) in item.children">
						<view @click="checkboxChange(child._id)">
							{{child.name}}<i class="text-xl" :class="[checkArray.includes(child._id)?'ri-checkbox-line':'ri-checkbox-blank-line' ]"></i>
						</view>
					</view>
				</view>
				<view class="">{{checkArray}}</view>
			</view>
		</unicloud-db>
		<!-- 音乐列表 -->
		<unicloud-db ref="addudb" v-slot:default="{data, loading, error, options}" collection="my-music-backup" orderby="publish_date asc" :page-size="3" @load="udbload">
			<view v-if="error">{{error.message}}</view>
			<view v-else>
				<view class="" v-for="(item,index) in data" :key="index">
					{{item.title}}
				</view>
			</view>
		</unicloud-db>
		<t-btn color="info" @click="submit">提交</t-btn>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkArray: []
			}
		},
		methods: {
			submit(){
				if(this.checkArray.length==0){
					uni.showToast({
						title:'请选择分类',
						icon:'error'
					})
					return
				}
				const db=uniCloud.database()
				db.collection('my-music-backup').add(
				{
					category_id:this.checkArray,
					title:'test'
				}
				)
				// this.$refs.addudb.add({
				// 	category_id:this.checkArray,
				// 	title:'test'
				// })
			},
			udbload(data){
				console.log(data)
			},
			checkboxChange(e) {
				console.log(e)
				if (this.checkArray.includes(e)) {
					// console.log("已添加过")
					const findRes = this.checkArray.findIndex((ee) => e == ee)
					this.checkArray.splice(findRes, 1)
				} else {
					this.checkArray.push(e)
				}
			}
		}
	}
</script>

<style>

</style>
